<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>消息中心</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="../../layuiAdmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../../layuiAdmin/style/admin.css" media="all">
</head>

<body>

    <div class="layui-fluid" id="LAY-app-message">
        <div class="layui-card">
            <div class="layui-tab layui-tab-brief">
                <ul class="layui-tab-title">
                    <li class="layui-this">全部消息</li>
                    <li>未读消息
                    </li>
                </ul>
                <div class="layui-tab-content">

                    <div class="layui-tab-item layui-show">
                        <div class="LAY-app-message-btns" style="margin-bottom: 10px;">
                            <button class="layui-btn layui-btn-primary layui-btn-sm" data-type="all"
                                data-events="del">删除</button>
                            <button class="layui-btn layui-btn-primary layui-btn-sm" data-type="all"
                                data-events="ready">标记已读</button>
                            <button class="layui-btn layui-btn-primary layui-btn-sm" data-type="all"
                                data-events="readyAll">全部已读</button>
                            <button class="layui-btn layui-btn-primary layui-btn-sm" data-events="sendMsg">发送消息</button>
                        </div>

                        <table id="LAY-app-message-all" lay-filter="LAY-app-message-all"></table>
                    </div>
                    <div class="layui-tab-item">

                        <div class="LAY-app-message-btns" style="margin-bottom: 10px;">
                            <button class="layui-btn layui-btn-primary layui-btn-sm" data-type="notice"
                                data-events="del">删除</button>
                            <button class="layui-btn layui-btn-primary layui-btn-sm" data-type="notice"
                                data-events="ready">标记已读</button>
                            <button class="layui-btn layui-btn-primary layui-btn-sm" data-type="notice"
                                data-events="readyAll">全部已读</button>
                        </div>

                        <table id="LAY-app-message-notice" lay-filter="LAY-app-message-notice"></table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="../../layuiAdmin/layui/layui.js"></script>
    <script>
        layui.config({
            base: '../../layuiAdmin/', //静态资源所在路径
            version: top.layui.setter.version
        }).extend({
            index: 'lib/index' //主入口模块
        }).use(['index', 'table'], function () {
            var $ = layui.$,
                admin = layui.admin,
                table = layui.table;
            //区分各选项卡中的表格
            var tabs = {
                all: {
                    text: '全部消息',
                    id: 'LAY-app-message-all'
                },
                notice: {
                    text: '未读',
                    id: 'LAY-app-message-notice'
                }
            };

            //标题内容模板
            var tplTitle = function (d) {
                if (d.cStatus === 0 && layui.sessionData(layui.setter.tableName)["UserInfo"].user.cId !== d.cSenderId) {
                    return '<a class="clset" href="messagedetail.html?id=' + d.cId + '">' + d.cTitle;
                } else {
                    return '<a href="messagedetail.html?id=' + d.cId + '">' + d.cTitle;
                }
            };
            admin.req({
                type: 'get',
                url: '/api/UserMsg/GetUnreadMsg',
                success: function (r) {
                    if (r.data.length != 0) {
                        $('.layui-tab-title li').eq(1).append('<span class="layui-badge">' + r.data.length + '</span>');
                    }
                }
            })
            //全部消息
            table.render({
                elem: '#LAY-app-message-all',
                url: '/api/UserMsg/GetUserMsgPageList',
                page: true,
                cols: [
                    [
                        { type: 'checkbox', fixed: 'left' },
                        { field: 'number', title: '序号', width: 100, align: 'center', type: 'numbers' },
                        { field: 'cTitle', title: '标题', minWidth: 300, templet: tplTitle },
                        { field: 'cSenderName', title: '发件人', minWidth: 300 },
                        { field: 'cReceiverName', title: '收件人', minWidth: 300 },
                        { field: 'cSenderDate', title: '时间', width: 170 }
                    ]
                ],
                skin: 'line',
                done: function (res, curr, count) {
                    $(".clset").parent().parent().parent().css("font-weight", "bolder");
                }
            });

            //未读
            table.render({
                elem: '#LAY-app-message-notice',
                url: '/api/UserMsg/GetUserMsgPageList',
                where: { queryJson: JSON.stringify({ 'cStatus': 0 }) },
                page: true,
                cols: [
                    [
                        { type: 'checkbox', fixed: 'left' },
                        { field: 'number', title: '序号', width: 100, align: 'center', type: 'numbers' },
                        { field: 'cTitle', title: '标题', minWidth: 300, templet: tplTitle },
                        { field: 'cSenderName', title: '发件人', minWidth: 170 },
                        { field: 'cSenderDate', title: '时间', width: 170, templet: function (d) { return layui.util.timeAgo(d.cSenderDate) } }
                    ]
                ],
                skin: 'line'
            });


            //事件处理
            var events = {
                del: function (othis, type) {
                    var thisTabs = tabs[type],
                        checkStatus = table.checkStatus(thisTabs.id),
                        data = checkStatus.data; //获得选中的数据
                    if (data.length === 0) return layer.msg('未选中行');

                    layer.confirm('确定删除选中的数据吗？', function () {
                        var Ids = [];
                        layui.each(data, function (index, item) {
                            Ids.push(item.cId);
                        })
                        admin.req({
                            type: 'post',
                            url: '/api/UserMsg/DelUserMsg',
                            data: { ids: Ids.join(',') },
                            success: function (data) {
                                if (data.code == 200) {
                                    layer.msg('删除成功', {
                                        icon: 1
                                    });
                                    table.reload(thisTabs.id); //刷新表格
                                }
                            }
                        })
                    });
                },
                ready: function (othis, type) {
                    var thisTabs = tabs[type],
                        checkStatus = table.checkStatus(thisTabs.id),
                        data = checkStatus.data; //获得选中的数据
                    if (data.length === 0) return layer.msg('未选中行');
                    var Ids = [];
                    layui.each(data, function (index, item) {
                        Ids.push(item.cId);
                    })
                    admin.req({
                        type: 'get',
                        url: '/api/UserMsg/MsgReady',
                        data: { ids: Ids.join(',') },
                        success: function (data) {
                            if (data.code == 200) {
                                layer.msg('标记已读成功', {
                                    icon: 1
                                });
                                table.reload(thisTabs.id); //刷新表格
                            }
                        }
                    })
                },
                readyAll: function (othis, type) {
                    var thisTabs = tabs[type];
                    admin.req({
                        type: 'get',
                        url: '/api/UserMsg/MsgReady',
                        success: function (data) {
                            if (data.code == 200) {
                                layer.msg(thisTabs.text + '：全部已读', {
                                    icon: 1
                                });
                                $('.layui-badge').remove();
                                table.reload(thisTabs.id); //刷新表格
                            }
                        }
                    })
                },
                sendMsg: function () {
                    layer.open({
                        type: 2,
                        title: '发送信息',
                        content: 'messageSend.html',
                        area: ['700px', '470px'],
                        btn: ['确定', '取消'],
                        yes: function (index, layero) {
                            var that = this.yes.arguments[1];
                            that.find('a.layui-layer-btn0').css("pointer-events", "none");
                            setTimeout(() => {
                                that.find('a.layui-layer-btn0').css("pointer-events", "")
                            }, 2000)
                            layero.find('iframe').contents().find('#form-submit').trigger('click');
                        }
                    });
                }
            };

            $('.LAY-app-message-btns .layui-btn').on('click', function () {
                var othis = $(this),
                    thisEvent = othis.data('events'),
                    type = othis.data('type');
                events[thisEvent] && events[thisEvent].call(this, othis, type);
            });

        });
    </script>
</body>

</html>